<template>
  <div class="flex w-100% h-100%">


    <ContentWrap class="flex-[3] ">
      <Form
        :model="formTotalData"
        @register="formRegister"
        :schema="formSchema"
        :key="formKey"
      />
    </ContentWrap>
  </div>
</template>

<script setup lang="tsx">
import { ContentWrap } from "@/components/ContentWrap";
import { ref, unref, nextTick, watch, reactive } from "vue";
import { ElTree } from "element-plus";
import { useForm } from "@/hooks/web/useForm";
import { Form, FormSchema } from "@/components/Form";
import { useValidator } from "@/hooks/web/useValidator";

const { formRegister, formMethods } = useForm()
const {  getFormData, getElFormExpose } = formMethods

// 主表单


const { required } = useValidator();

// 添加formKey用于强制重新渲染表单
const formKey = ref(0);
const treeEl = ref<typeof ElTree>();
const formTotalData = ref({});






const currentDepartment = ref("");
watch(
  () => currentDepartment.value,
  (val) => {
    unref(treeEl)!.filter(val);
  }
);


// 获取当前日期字符串（YYYY-MM-DD格式）
const getCurrentDate = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};


// 修改表单 schema，确保有默认值
const formSchema = reactive<FormSchema[]>([
  {
    field: "approver",
    label: "审批人",
    component: "Input",
    componentProps: {
      // disabled: true,
    },
    formItemProps: {
      rules: [required()],
    },
    colProps: {
      span: 24,
    },
    value: (formTotalData.value as { name?: string })?.name || "", // 使用表单数据的值
  },
  {
    field: "approveTime",
    label: "审批时间",
    component: "DatePicker",
    componentProps: {
      type: "date",
      valueFormat: "YYYY-MM-DD", // 添加这一行
    },
    formItemProps: {
      rules: [required()],
    },
    colProps: {
      span: 24,
    },
    value: (formTotalData.value as { validTime?: string })?.validTime || getCurrentDate() // 默认设置为当前日期,
  },
  {
    field: "approveContext",
    label: "处理结果",
    componentProps: {
      placeholder: "请输入处理结果",
      type: "textarea",
      rows: 3,
    },
    colProps: {
      span: 24,
    },
    component: "Input",
    value: (formTotalData.value as { remark?: string })?.remark || "",
  },
]);




// 在孙组件中暴露表单数据和方法
const formData = ref({});
// 提供获取表单数据的方法
const getFormDatas = async () => {
  const elForm = await getElFormExpose();
  const valid = await elForm?.validate().catch((err) => {
    return false;
  });

  if (valid) {
    formData.value = await getFormData();
    return formData.value;
  }
  return null;
};

// 修改 submit 方法，确保返回表单数据
const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {

    return false
  })

  if (valid) {
    const formData = await getFormData()
    // 添加部门名称到表单数据
    // formData.departmentName = currentNode.value
    return formData
  }
  return null
}
// 暴露方法给父组件
defineExpose({

  submit: submit,
  getFormData: getFormDatas,
  formData: formData
});
</script>

<style scoped lang="less">
:deep(.el-tree-node__content) {
  height: 40px !important;
}

:deep(.is-current-node .el-tree-node .el-tree-node__content) {
  background-color: transparent !important;
  color: inherit !important;
  font-weight: normal;
}
:deep(.is-current-node > .el-tree-node__content) {
  background-color: var(--el-color-primary) !important;
  border-radius: 0 20px 20px 0;
  color: var(--el-tree-content-color) !important;
  font-weight: bold;
}

:deep(.el-tree) {
  background: transparent !important;
}

:deep(.el-form-item) {
  display: flex;
  flex-direction: column !important;
}
:deep(.el-form-item__label-wrap) {
  margin-left: 0 !important;
}
:deep(.el-select) {
  width: 100% !important;
}
</style>
